<template>
  <div class="part-eight">
    <div class="title">合作伙伴</div>
    <div class="cooperator">
      <div class="item-row">
        <a :href="links.Electronic" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-1.svg" alt="">
        </a>
        <a :href="links.Duguang" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-2.svg" alt="">
        </a>
        <a :href="links.JiuZhouYun" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-3.svg" alt="">
        </a>
        <a :href="links.TuZhan" class="item" target="_blank">
          <img src="~@/assets/web/svgs/cooperator-4.svg" alt="">
        </a>
        <a :href="links.Smart" class="item" target="_blank">
          <img src="~@/assets/web/svgs/cooperator-5.svg" alt="">
        </a>
        <a :href="links.Gitee" class="item" target="_blank">
          <img src="~@/assets/web/svgs/cooperator-6.svg" alt="">
        </a>
      </div>
      <div class="item-row">
        <a :href="links.ShanYang" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-7.svg" alt="">
        </a>
        <a :href="links.JiHu" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-8.svg" alt="">
        </a>
        <a :href="links.ShenWanHongYuan" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-9.svg" alt="">
        </a>
        <a :href="links.ShOpen" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-10.svg" alt="">
        </a>
        <a :href="links.JinShi" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-11.svg" alt="">
        </a>
        <a :href="links.WenZhou" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-12.svg" alt="">
        </a>
      </div>
      <div class="item-row">
        <a :href="links.DongHua" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-13.svg" alt="">
        </a>
        <a :href="links.OpenTekr" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-14.svg" alt="">
        </a>
        <a :href="links.Gitlink" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-15.svg" alt="">
        </a>
        <a :href="links.NetTouch" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-16.svg" alt="">
        </a>
        <a :href="links.BaiYulan" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-17.svg" alt="">
        </a>
        <a :href="links.XCharge" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-18.svg" alt="">
        </a>
      </div>
      <div class="item-row">
        <a :href="links.ZhengYi" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-19.svg" alt="">
        </a>
        <a :href="links.WuGen" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-20.svg" alt="">
        </a>
        <a :href="links.Nepx" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-21.svg" alt="">
        </a>
        <a :href="links.RainBond" target="_blank" class="item">
          <img src="~@/assets/web/svgs/cooperator-22.svg" alt="">
        </a>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { links } from '@/utils/constants';
</script>
<style lang="less" scoped>
.part-eight {
  text-align: center;
  margin-top: 70px;

  .title {
    font-size: 32px;
    font-weight: 600;
    color: #042749;
  }

  .cooperator {
    margin: 58px auto 0;

    .item-row {
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      margin-bottom: 32px;

      &:last-child {
        margin-bottom: 56px;
      }

      .item {
        flex-shrink: 0;
        margin-right: 32px;
        padding: 11px;
        box-sizing: border-box;
        border: 1px solid #DFE7EE;
        border-radius: 4px;

        img {
          width: 128px;
          height: 40px;
        }

        &:last-child {
          margin-right: 0;
        }
      }

      a.item {
        display: flex;
        align-items: center;

        &:hover {
          border: 1px solid #096DD9;
        }

        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
